<template>
	<div class="order_list">
		<div class="common_form_search">
			<el-form ref="searchForm" :inline="true" :model="searchForm">
				<el-form-item label="订单号">
					<el-input v-model="searchForm.orderNo" style="width: 220px" placeholder="请输入订单号" clearable />
				</el-form-item>
				<el-form-item label="ID">
					<el-input v-model="searchForm.orderID" placeholder="请输入ID" clearable />
				</el-form-item>
				<el-form-item label="商品名称">
					<el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable />
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="searchForm.receivingName" placeholder="请输入用户名" clearable />
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="searchForm.receivingMobile" placeholder="请输入手机号" clearable />
				</el-form-item>
				<el-form-item label="风控姓名">
					<el-input v-model="searchForm.riskName" placeholder="请输入风控姓名" clearable />
				</el-form-item>
				<el-form-item label="风控手机号">
					<el-input v-model="searchForm.riskMobile" placeholder="请输入风控手机号" clearable />
				</el-form-item>
				<el-form-item label="创建时间">
					<my-date-picker ref="myDatePicker" />
				</el-form-item>
				<el-form-item label="供应商">
					<el-input v-model="searchForm.shopName" placeholder="请输入供应商" clearable />
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="searchForm.address" placeholder="请输入地址" clearable />
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="search()">查询</el-button>
					<el-button size="small" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-divider />
		<div class="child_page">
			<el-table :data="tableData" border>
				<el-table-column align="center" prop="is_check" label="创建时间">
					<template slot-scope="scope">
						<el-tag :type="scope.row.is_check == 1 ? 'success' : scope.row.is_check == 2 ? 'danger' : ''">
							{{ scope.row.is_check == 1 ? "已审核" : scope.row.is_check == 2 ? "待审核" : "" }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="contact_tel" width="100" label="手机号" />
				<el-table-column align="center" prop="faname" label="昵称" />
				<el-table-column align="center" prop="create_time" label="商品图片" />
				<el-table-column align="center" prop="create_time" label="盲盒名称" />
				<el-table-column align="center" prop="sale_user_id" label="商品id" />
				<el-table-column align="center" prop="contact_tel" label="订单id" />
				<el-table-column align="center" prop="parent_user_id" label="订单号" />
				<el-table-column align="center" prop="create_time" label="商品等级" />
				<el-table-column align="center" prop="people" label="订单来源" />
				<el-table-column align="center" prop="create_time" label="订单金额" />
				<el-table-column align="center" prop="create_time" label="充值金额" />
				<el-table-column align="center" prop="is_show" label="支付方式">
					<template slot-scope="scope">
						<el-tag :type="scope.row.is_show == 1 ? 'success' : scope.row.is_show == 2 ? 'danger' : ''">
							{{ scope.row.is_show == 1 ? "启用" : scope.row.is_show == 2 ? "禁用" : "" }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="people" label="寄售时间" />
				<el-table-column align="center" prop="create_time" label="寄售金额" />
				<!-- 完成、寄售中 -->
				<el-table-column align="center" prop="create_time" label="寄售状态" />
				<el-table-column fixed="right" align="center" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini"
							@click="$router.push({ name: 'saleView', params: { viewId: scope.row.sale_user_id } })">查看
						</el-button>
						<el-button v-if="scope.row.is_check == 2" type="primary" size="mini"
							@click="handleCheck(scope.row.id)">待审核</el-button>
					</template>
				</el-table-column>
			</el-table>
			<custom-page ref="customPage" :total="total" @getList="getList" />
		</div>
	</div>
</template>
<script>
	import customPage from '@/components/customPage'
	import myDatePicker from '@/components/myDatePicker'

	export default {
		components: {
			myDatePicker,
			customPage,
		},
		data() {
			return {
				searchForm: {
					orderID: '',
					orderNo: '',
					goodsName: '',
					receivingName: '',
					receivingMobile: '',
					riskName: '',
					riskMobile: '',
					orderStatus: '',
					orderCreateTime: '',
					shopName: '',
					address: '',
					eduId: ''
				},
				tableData: []
			}
		},
		mounted() {},
		methods: {
			// 重置
			reset() {
				if (this.$refs.myDatePicker) {
					this.$refs.myDatePicker.reset()
				}
				this.searchForm = {
					orderID: '',
					orderNo: '',
					goodsName: '',
					receivingName: '',
					receivingMobile: '',
					riskName: '',
					riskMobile: '',
					orderStatus: '',
					orderCreateTime: '',
					shopName: '',
					address: ''
				}
				this.getList()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.common_form_search {
		padding: 15px 30px 0;
	}

	.child_page {
		padding-bottom: 15px;
		padding-left: 30px;
		padding-right: 30px;

		p,
		div {
			box-sizing: border-box;
		}
	}
</style>
